<template>
    <div id="dropBtn" :data-drop-menu-auto="autoOpen" class="dropdown display-inline">
        <a href="#" class="dropdown-toggle" :class="btnClass" data-toggle="dropdown" :id="id">
            <slot></slot>
            <icon class="p-l-5" :class="icon"></icon>
        </a>
        <ul class="dropdown-menu animated fadeInRight " :aria-labelledby="id">
            <li v-for="menu in menus" :key="menu.id" :class="menu.divider">
                <router-link v-if="menu.divider == null" :to="menu.link">{{menu.name}}</router-link>
            </li>
        </ul>
    </div>
</template>

<script>
    /* eslint-disable no-undef */
	import Icon from '../widget/Icon.vue';
	export default {
		name: 'DropLink',
		components: {Icon},
		data () {
			return {
				id: 'dropBtn_' + Math.floor(Math.random() * 100000000)
			};
		},
		props: {
			btnClass: {},
			menus: {},
			autoOpen: {default: false},
			icon: {type: String}
		},
		mounted () {
			$('[data-drop-menu-auto="true"]').mouseover(function () {
				$(this).addClass('open');
			}).mouseout(function () {
				$(this).removeClass('open');
			});
		}
	};
</script>
